<template>
    <div class="pay-page-layout">
        <div style="margin-left:0px; margin-top: 20px">
            <el-tabs v-model="activeName" type="card" @tab-click="tabChang">
                <el-tab-pane label="微信" name="first">
                    <div style="margin-left: 16px">支付金额 ￥<span style="color:#09BB07; font-size: 18px;">{{ money
                            }}</span>，请使用微信扫描下方二维码完成支付元
                    </div>
                    <canvas id="canvas"></canvas>

                </el-tab-pane>
                <el-tab-pane label="支付宝" name="second">
                    <iframe :style="{ 'width': '100%', 'height': height }" :srcdoc="canvasZfb"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="提示" :show-close="false" :visible.sync="dialogVisible" width="30%">
            <el-result icon="success" title="支付成功" subTitle="">

            </el-result>
        </el-dialog>
    </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
    data() {
        return {
            activeName: 'first',
            canvasZfb: '',
            money: 0,
            height: 0,
            wx: 0,
            zfb: 0,
            timer: null,
            tradeNo: '',
            wxPaySuc: false,
            dialogVisible: false,
            username: localStorage.getItem("username"),
            token: localStorage.getItem("token"),
        };
    },
    methods: {
        setTableHeight() {
            this.$nextTick(() => {
                const bodyHeight = window.innerHeight;
                this.height = (bodyHeight - 300) + 'px';
            });
        },
        generateQRCode(text) {
            QRCode.toCanvas(document.getElementById('canvas'), text, function (error) {
                if (error) console.error(error)
                console.log('二维码生成成功')
            })
        },
        tabChang(val) {
            const money = this.$route.query.money;
            if (val === 'first' && !this.wx) {
                this.getWxPay({ money })
            } else if (val.name === 'second' && !this.zfb) {
                this.getZfbPay({ money })
            }
        },
        getWxPay(params) {
            this.$post("/wxpay/nativePay", params).then((res) => {
                if (res) {
                    this.generateQRCode(res.data.code);
                    this.tradeNo = res.data.tradeNo
                    this.wx = 1
                }
            });
        },
        getZfbPay(params) {
            this.$post("/alipay/order", params).then((res) => {
                if (res) {
                    this.canvasZfb = res.data.replace(/\\/g, '');
                    this.setTableHeight();
                    window.addEventListener("resize", this.setTableHeight);
                    this.zfb = 1
                }
            });
        },
        getSuccessStatus() {
            if (this.tradeNo) {
                this.$get("/wxpay/payStatus", { tradeNo: this.tradeNo }).then((res) => {
                    if (res && res.code * 1 === 200) {
                        this.dialogVisible = true
                        clearInterval(this.timer)
                        this.$router.push('/myWallet')

                    }
                });
            }

        }
    },
    mounted() {
        const money = this.$route.query.money;
        if (money) {
            this.money = money
            this.getWxPay({ money })
        }
    },
    created() {
        this.timer = setInterval(() => {
            this.getSuccessStatus()
            // 执行您的定时任务代码
        }, 3000); // 每隔1秒执行一次
    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁之前清除定时器
    }
};
</script>

<style scoped lang="less">
.pay-page-layout {
    width: 80%;
    margin: auto;
}

.app-top {
    height: 80px;
    width: 100%;
    margin: auto;
}

#canvas {
    width: 300px !important;
    height: 300px !important;
}

#canvasZfb {
    width: 200px !important;
    height: 200px !important;
}

.time {
    /deep/.el-form-item__label {
        line-height: 20px;
    }
}
</style>